<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue-2.4.0.js"></script>
    <link href="lib/bootstrap-3.3.7.css" rel="stylesheet"/>
</head>
<body>

<div id="app">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">添加品牌</h3>
        </div>
        <div class="panel-body form-inline">
            <label>
                ID:
                <input type="text" class="form-control" v-model="id"/>
            </label>
            <label>
                Name:
                <input type="text"  class="form-control" v-model="name"/>
            </label>
            <!--在vue中，使用事件绑定机制，为元素指定处理函数的时候，如果加了括号，就可以给函数传递参数-->
            <input type="button" value="添加" class="btn btn-primary" @click="add()"/>
            <label>
                搜索关键字:
                <input type="text"  class="form-control" v-model="keywords"/>
            </label>
        </div>
    </div>
    <table class="table table-striped table-bordered table-hover">
        <thead>
        <tr>
            <th>ID</th>
            <th>品牌</th>
            <th>时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <!--
        之前  v-for 中的数据都是从 data 上的 list 中直接渲染过来的

        现在，我们自定义了一个search 方法，同时   把所有的关键字，通过传参的形式，传递给了search 方法

        在search 方法内部，通过执行 for 循环，把所有的符合 搜索关键字的数据，保存到 一个新数组中，返回
        -->
        <tr v-for="item in search(keywords)" :key="item.id">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{ item.time | times}}</td>
            <td>
                <!--.prevent阻止默认行为  刷新的行为-->
                <a href="#" @click.prevent="del(item.id)">删除</a>
            </td>
        </tr>
        </tbody>
    </table>

</div>

<div id="app2">
    <h3>{{ dt |  dataFormat}}</h3>
</div>


<script>
//所谓的全局过滤器就是，就是所有的VM实例都是共享的
    Vue.filter('times', function (dataStr) {
        //根据给定的时间字符串，得到特定的时间
        var dt = new Date(dataStr);
        console.log(dt);
        var y = dt.getFullYear();
        var m = dt.getMonth() + 1;
        var d = dt.getDate();

        return y+ '-' + m +'-' + d;
//        return `{y}-{m}-{d}`;

    });

    //vue里面全部用ES6的写法  -------在这里面就必须特别注意  this  的作用域
    var vm = new Vue({
        el:'#app',
        data:{
            id:'',
            name:'',
            keywords:'',
            list:[
                {id:1, name:'宝马' ,time: new Date()},
                {id:2, name:'奔驰' ,time: new Date()}
            ]
        },
        methods:{
            add:function (){
                this.list.push({id: this.id, name: this.name, time: new Date()}),
                        //清空输入框
                        this.id=this.name=''
            },
            del:function (id) {
                //分析：
                //1.如如何根据id，找到要删除这一项的索引
                //2.如果找打索引了直接调用数组删除方法

                //遍历
                //this   的作用域一定要注重
                var that = this;
                this.list.some(function (item,i) {
                    if(item.id == id){
                        that.list.splice(i,1);
                        return true

                    }
                })
            },
            search:function (keywords) {
                //定义一个新的数组
                var newList = [];

//                注意：forEach some fiter findIndex  这些都属于数组的新方法 都会对数组中的每一项，进行遍历  执行相关的操作
//                遍历数组，查找符合关键字的组成新的数组  并返回
                this.list.forEach(function (item) {
                    //匹配关键字
                    //indexOf()用来检索指定的字符串值在字符串中首次出现的位置。  查找不到就显示-1
                    // 它可以接收两个参数，searchvalue表示要查找的子字符串，fromindex表示查找的开始位置，省略的话则从开始位置进行检索。
                    //keywords 可以是参数  也可以是空参  空参的话就会把所有的信息全部展示出来
                    if (item.name.indexOf(keywords) != -1) {
//                        push() 方法可向数组的末尾添加一个或多个元素
                        newList.push(item);
                    }
                });
//                var newList = this.list.filter(function (item) {
//                    if(item.name.includes(keywords)){
//                        return item;
//                    }
//                });

                return newList;
            }
        }
    });

    var vm2 = new Vue({
        el:'#app2',
        data:{
            dt : new Date()
        },
        methods:{},
            //定义私有过滤器   过滤器有两个  条件   【过滤器名称   和   处理函数】
        //过滤器调用的时候，采用的是就近原则， 如果有私有私有过滤器和全局过滤器名称一致了，这时候  优先调用私有过滤器
        filters:{
                dataFormat: function (dataStr) {
                    //根据给定的时间字符串，得到特定的时间
                    var dt = new Date(dataStr);
                    console.log(dt);
                    var y = dt.getFullYear();
                    var m = dt.getMonth() + 1;
                    var d = dt.getDate();

                    return y+ '-' + m +'-' + d +'======';
                }

        }
    });


</script>
</body>
</html>